<template>
    <el-row class="navbar" type="flex">
        <el-col :span="12" class="flexCol">
            <Hamburger id="hamburger-container" class="hamburger-container" @toggleClick="toggleClick" />
        </el-col>
        <el-col :span="12">
            <el-row class="right-menu" type="flex">
                <el-col>
                    <span :class="['iconfont', isFullscreen ? 'icon-quxiaoquanping' : 'icon-quanping']"
                        @click="changeScreen"></span>
                </el-col>
                <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
                    <div class="avatar-wrapper">
                        <img src="@/assets/img/avatar.gif" class="user-avatar">
                        <i class="el-icon-caret-bottom" />
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <router-link to="/profile/index">
                            <el-dropdown-item>Profile</el-dropdown-item>
                        </router-link>
                        <router-link to="/">
                            <el-dropdown-item>Dashboard</el-dropdown-item>
                        </router-link> -->
                        <!-- <a target="_blank" href="">
                            <el-dropdown-item>Github</el-dropdown-item>
                        </a> -->
                        <!-- <a target="_blank" href="">
                            <el-dropdown-item>Docs</el-dropdown-item>
                        </a> -->
                        <el-dropdown-item divided @click.native="logout">
                            <span style="display:block;">退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-row>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import Hamburger from "@/components/SvgIcon/Hamburger.vue"
import { useRouter } from 'vue-router/composables'
import { useMenuStore } from '@/stores/menu';
import screenfull from "screenfull";
import { Message } from "element-ui";
import { onMounted, ref, onBeforeUnmount } from "vue";
onMounted(() => {
    screenfullInit()
})
const isFullscreen = ref(false)
const screenfullInit = () => {
    if (screenfull.isEnabled) {
        screenfull.on('change', screenfullChange)
    }
}
const screenfullChange = () => {
    isFullscreen.value = screenfull.isFullscreen
}
// vue3里面销毁组件前的钩子函数
onBeforeUnmount(() => {
    if (screenfull.isEnabled) {
        screenfull.off('change', screenfullChange)
    }
})
const changeScreen = () => {
    // 判断是否支持
    if (!screenfull.isEnabled) {
        Message({
            message: "不支持全屏",
            type: "warning"
        });
        return false;
    }
    screenfull.toggle();
}
const $router = useRouter()
const logout = () => {
    console.log("退出登录");
    $router.push('/login').catch(err => {
        // 只有当路由不重复时的报错才抛出
        if (err.name !== 'NavigationDuplicated') {
            throw err
        }
    })

}
const menuStore = useMenuStore()
const toggleClick = () => {
    menuStore.changeFlodState()
}
</script>

<style lang="scss" scoped>
.navbar {
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    display: flex;

    .hamburger-container {
        line-height: 46px;
        height: 100%;
        float: left;
        cursor: pointer;
        transition: background .3s;
        -webkit-tap-highlight-color: transparent;

        &:hover {
            background: rgba(0, 0, 0, .025)
        }
    }

    .iconfont {
        font-size: 36px;
        cursor: pointer;
    }

    .breadcrumb-container {
        float: left;
    }

    .errLog-container {
        display: inline-block;
        vertical-align: top;
    }

    .right-menu {
        float: right;
        height: 100%;
        line-height: 50px;

        &:focus {
            outline: none;
        }

        .right-menu-item {
            display: inline-block;
            padding: 0 8px;
            height: 100%;
            font-size: 18px;
            color: #5a5e66;
            vertical-align: text-bottom;

            &.hover-effect {
                cursor: pointer;
                transition: background .3s;

                &:hover {
                    background: rgba(0, 0, 0, .025)
                }
            }
        }

        .avatar-container {
            margin-right: 30px;

            .avatar-wrapper {
                margin-top: 5px;
                position: relative;

                .user-avatar {
                    cursor: pointer;
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                }

                .el-icon-caret-bottom {
                    cursor: pointer;
                    position: absolute;
                    right: -20px;
                    top: 25px;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>